<template>
<div>
  <div id="myChart" :style="{width: '95%', height: '600px'}"></div>
  <el-button @click="sw('opt1')">treemap</el-button>
  <el-button @click="sw('opt2')">sunburst</el-button>
  <el-button @click="sw('opt3')">tree</el-button>
</div>
  
</template>

<script>
import axios from 'axios'
export default {
  async created(){
    
  },
  async mounted(){    
    await this.getData()
    this.drawChart()
  },
  data(){
    return {
      data:{},
      tree:[],
      all:0,
      opt:'opt1',
      charts:{},
      opt1:{},
      opt2:{},
      opt3:{}
    }
  },
  methods:{
    sw(opt){
      if(opt=='opt1'){
        this.charts.setOption(this.opt1)        
      }
      else if(opt=='opt2'){
        this.charts.setOption(this.opt2)        
      }
      else if(opt=='opt3'){
        this.charts.setOption(this.opt3)
      }
    },
    async getData(){
      var url="https://ygongyun.com/web/comp/api/hospitalBigScreen/DevCntPriceByType?departid=0&hosid=1120"
      var rep=await axios.get(url,{headers:{Authorization:"khXCHz7h84WPac6isYp0Tg=="}})
      this.data=rep.data.result
      
      var ps=[]
      var all=0
      this.data.forEach(element => {
        var pid=element.pid
        var pname=element.pname
        var has=false
        for (var i=0;i<ps.length;i++){
          if(ps[i].pid==pid){
            has=true
            break
          }
        }
        if(!has){
          ps.push({pid:pid,name:pname,value:0,children:[]})
        }
      });
      ps=ps.sort(function(a,b){return a.pid-b.pid})
      console.log(ps);

      for(var i=0;i<ps.length;i++){
        var p=ps[i]        
        for(var j=0;j<this.data.length;j++){
          var item=this.data[j]
          if(item.pid==p.pid){
            var ele={
              name:item.name,
              value:item.price
            }
            p.value+=ele.value
            all+=ele.value
            p.children.push(ele)
          }
        }
      }

      this.tree=ps
      this.all=all
      // console.log(this.tree);
    },
    drawChart(){
      // let myChart = this.$echarts.init(document.getElementById('myChart'))
      var chartDom = document.getElementById('myChart');
      var myChart = this.$echarts.init(chartDom);
      this.charts=myChart
      var t=this
      var all=this.all
      var option1;
      option1={
           title: {
            text: 'treemap test',
            left: 'center'
          },
          tooltip: {
            formatter: function (info) {
              var value = info.value;
              var treePathInfo = info.treePathInfo;
              var treePath = [];
              for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
              }
              return [
                '<div class="tooltip-title" >' +
                  t.$echarts.format.encodeHTML(treePath.join('/')) +
                  '</div>',
                '数量: ' + t.$echarts.format.addCommas(value) + ' ￥ / '+ (value/all*100).toFixed(2) +' %'
              ].join('');
            }
          },
          series: [
            {
              name: '价值',
              type: 'treemap',
              visibleMin: 300,
              label: {
                show: true,
                formatter: '{b}'
              },
              upperLabel: {
                show: true,
                height: 30
              },
              itemStyle: {
                borderColor: '#fff'
              },
              levels: [
                {
                  itemStyle: {
                    borderColor: '#777',
                    borderWidth: 0,
                    gapWidth: 1
                  },
                  upperLabel: {
                    show: false
                  }
                },
                {
                  itemStyle: {
                    borderColor: '#555',
                    borderWidth: 5,
                    gapWidth: 1
                  },
                  emphasis: {
                    itemStyle: {
                      borderColor: '#ddd'
                    }
                  }
                },
                {
                  colorSaturation: [0.35, 0.5],
                  itemStyle: {
                    borderWidth: 5,
                    gapWidth: 1,
                    borderColorSaturation: 0.6
                  }
                }
              ],
              data: this.tree
            }
          ]
         }
      
      var option2
      option2={
        title: {
        // text: 'sunset',        
        textStyle: {
            fontSize: 14,
            align: 'center'
          }        
        },
        tooltip: {
            formatter: function (info) {
              var value = info.value;
              var treePathInfo = info.treePathInfo;
              var treePath = [];
              var all=t.all
              for (var i = 1; i < treePathInfo.length; i++) {
                treePath.push(treePathInfo[i].name);
              }
              return [
                '<div class="tooltip-title" >' +
                  t.$echarts.format.encodeHTML(treePath.join('/')) +
                  '</div>',
                '数量: ' + t.$echarts.format.addCommas(value) + ' ￥/ '+ (value/all*100).toFixed(2) +' %'
              ].join('');
            }
          },
        series: {
          type: 'sunburst',
          data: this.tree,
          avoidLabelOverlap: true,
          radius: [0, '85%'],
          sort: undefined,
          emphasis: {
            focus: 'ancestor'
          },
          levels: [
            {},
            {
              r0: '15%',
              r: '70%',
              itemStyle: {
                borderWidth: 2
              },
              label: {
                // rotate: 'tangential',
                minAngle:10,
                overflow:'break',
                // ellipsis:'...',
                // borderColor:'red',
                // borderWidth:1,
                width:100
              }
            },
            {
              r0: '72%',
              r: '75%',
              avoidLabelOverlap:true,
              labelLine:{
                show:true
              },
              label: {         
                align:'center',
                // rotate: 'tangential', 
                position: 'outside',
                // minAngle:7,
                // padding: 5,
                silent: false,
                // overflow:'break',
                // ellipsis:'...',
                // width:80,
                // height:100,
                // borderWidth:"1",
                // borderColor:"red",
                // formatter:function(p){
                //   console.log(p)
                //   return p.name
                // }
              },
            }
          ]
      }
      }

      var option3
      option3={
        tooltip: {
            formatter: function (info) {
              // console.log(info);
              var value = info.value;
              var name=info.name
              // var treePathInfo = info.treePathInfo;
              // var treePath = [];
              // var all=t.all
              // for (var i = 1; i < treePathInfo.length; i++) {
              //   treePath.push(treePathInfo[i].name);
              // }
              return [
                '<div class="tooltip-title" >' +
                  t.$echarts.format.encodeHTML(name.substring(0,10)) +
                  '</div>',
                '数量: ' + t.$echarts.format.addCommas(value) + ' ￥/ '+ (value/all*100).toFixed(2) +' %'
              ].join('');
            }
          },
        series: [
        {
          type: 'tree',
          data: [{name:"root",children:this.tree}],
          top: '1%',
          left: '7%',
          bottom: '1%',
          right: '20%',
          symbolSize: 7,
          label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9
          },
          leaves: {
            label: {
              position: 'right',
              verticalAlign: 'middle',
              align: 'left'
            }
          },
          emphasis: {
            focus: 'descendant'
          },
          expandAndCollapse: true,
          animationDuration: 550,
          animationDurationUpdate: 750
        }
      ]
      }

      this.opt1=option1
      this.opt2=option2
      this.opt3=option3
        // 绘制图表
      console.log(this.tree);
      
      myChart.setOption(option2);
    }
  }
}
</script>

<style>

</style>